<!--
 * @描述信息:  测试表单组件案例全集
 * @Author:   zls
-->
<template>
  <div class="mine">
    <z-head text="测试表单组件" leftSvg=""></z-head>
    <Form ref="formRef">
      <z-input
        v-model="form.username"
        label="用户名"
        required
        :rules="[
          { required: true, message: '请输入用户名' },
          { message: loginName.err, pattern: loginName.reg }
        ]"
      >
      </z-input>
      <z-input
        v-model="form.password"
        label="密码"
        :type="showText ? 'text' : 'password'"
        required
        :rules="[
          { required: true, message: '请输入密码' },
          { message: loginPwd.err, pattern: loginPwd.reg }
        ]"
      >
        <template #right-icon> <z-svg :name="showText ? 'yanjing' : 'yanjing1'" @click="showText = !showText"></z-svg> </template>
      </z-input>
      <z-input v-model="form.height" label="身高" :maxlength="3" :rules="[{ message: intNum.err, pattern: form.height && intNum.reg }]">
        <template #extra> cm </template>
      </z-input>
      <z-input v-model="form.textarea" label="描述" type="textarea" label-align="top" :maxlength="100" :rules="[{ message: textName.err, pattern: form.textarea && textName.reg }]"> </z-input>
      <z-select
        v-model="form.select1"
        label="select下拉框1"
        required
        :columns="columns1.list"
        :default-index="1"
        @clear="
          () => {
            form.select2.text = ''
            form.select2.value = ''
          }
        "
        :label-width="pxToRem(120)"
      ></z-select>
      <z-select v-model="form.select2" label="select下拉框2" required :disabled="!form.select1.value" hasFather :columns="columns2.list" :label-width="pxToRem(120)"></z-select>
      <!-- vant4版本的select的级联选择器无法设置默认值!!!! 请使用Cascader！！！！ -->
      <z-select v-model="form.select3" label="select多列" :columns="columns3.list" :label-width="pxToRem(120)"></z-select>
      <z-select v-model="form.select4" label="select多列回选" :label-width="pxToRem(120)" :columns="columns4.list"></z-select>
      <z-date v-model="form.date1" label="开始日期" @confirm="confirmDate1"></z-date>
      <z-date v-model="form.date2" label="结束日期" @confirm="confirmDate2"></z-date>
      <z-time v-model="form.time1" label="开始时间" @confirm="confirmTime1"></z-time>
      <z-time v-model="form.time2" label="结束时间" @confirm="confirmTime2"></z-time>
      <z-cascader v-model="form.cascader1" label="cascader级联" :options="cascaderOptions1"></z-cascader>
      <z-cascader v-model="form.cascader2" label="cascader级联回选" required :options="cascaderOptions2"></z-cascader>
      <z-calendar v-model="form.calendar1" label="日历单选" type="single"></z-calendar>
      <z-calendar v-model="form.calendar2" label="日历范围" type="range" required></z-calendar>
      <z-calendar v-model="form.calendar3" label="日历多选" type="multiple"></z-calendar>
      <z-checkbox v-model="form.checkboxList" label="复选框回选" :list="checkboxList"></z-checkbox>
      <z-radio v-model="form.radio" label="复选框回选" :list="radioList"></z-radio>
      <z-switch v-model="form.switch" label="开关"></z-switch>
      <z-uploader v-model="form.fileList1" label="文件上传" :fileTypeList="['image']" :max-count="3"></z-uploader>
      <z-uploader v-model="form.fileList2" label="文件上传默认值" :fileTypeList="['image', 'zip']"></z-uploader>
    </Form>

    <div class="btns">
      <Button round block type="warning" size="small" @click="clear"> 清空 </Button>
      <Button round block type="primary" size="small" @click="submit"> 提交 </Button>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { Form, Button, showToast } from 'vant'
import $day from 'dayjs'
import { loginName, loginPwd, intNum, textName } from '@/utils/reg'
import { pxToRem, getType } from '@/utils'

const formRef = ref()
// 表单数据
const form = reactive({
  username: 'zls',
  password: 'Qwer1234@',
  height: '173',
  textarea: '',
  select1: { text: '', value: '4' },
  select2: { text: '', value: '' },
  select3: { text: '', value: null },
  select4: { text: '', value: ['Tuesday', 'Evening', 'PlayGame'] },
  cascader1: { text: '', value: null },
  cascader2: { text: '', value: ['320000', '320200'] },
  date1: '',
  date2: '2023-08-01',
  time1: '',
  time2: '12:12:12',
  calendar1: '2022-05-25',
  calendar2: '2022-05-26,2022-09-10',
  calendar3: '2022-05-26,2022-05-28',
  checkboxList: ['2'],
  radio: '',
  switch: '0',
  fileList1: null,
  fileList2: [{ url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg' }, { url: 'https://fastly.jsdelivr.net/npm/@vant/assets@1.0.8/design/axure-20200905.zip' }]
})
const showText = ref(false) // 控制密码的显示与隐藏

// 下拉框配置项
const columns1 = reactive({
  list: [
    { text: '张三', value: '3' },
    { text: '李四', value: '4' },
    { text: '王五', value: '5' }
  ]
})
const columns2 = reactive({
  list: [
    { text: '马六', value: '7' },
    { text: '秦七', value: '8' },
    { text: '陈八', value: '9' }
  ]
})
const columns3 = reactive({
  list: [
    // 第一列
    [
      { text: '周一', value: 'Monday' },
      { text: '周二', value: 'Tuesday' },
      { text: '周三', value: 'Wednesday' },
      { text: '周四', value: 'Thursday' },
      { text: '周五', value: 'Friday' }
    ],
    // 第二列
    [
      { text: '上午', value: 'Morning' },
      { text: '下午', value: 'Afternoon' },
      { text: '晚上', value: 'Evening' }
    ],
    // 第三列
    [
      { text: '吃饭', value: 'Eat' },
      { text: '学习', value: 'Study' },
      { text: '打游戏', value: 'PlayGame' }
    ]
  ]
})
const columns4 = reactive({
  list: [
    // 第一列
    [
      { text: '周一', value: 'Monday' },
      { text: '周二', value: 'Tuesday' },
      { text: '周三', value: 'Wednesday' },
      { text: '周四', value: 'Thursday' },
      { text: '周五', value: 'Friday' }
    ],
    // 第二列
    [
      { text: '上午', value: 'Morning' },
      { text: '下午', value: 'Afternoon' },
      { text: '晚上', value: 'Evening' }
    ],
    // 第三列
    [
      { text: '吃饭', value: 'Eat' },
      { text: '学习', value: 'Study' },
      { text: '打游戏', value: 'PlayGame' }
    ]
  ]
})

// 日期选择配置
function confirmDate1(data) {
  if ($day(data).valueOf() > $day(form.date2).valueOf()) {
    showToast('开始日期不能大于结束日期')
    form.date1 = ''
    return
  }
}
function confirmDate2(data) {
  if ($day(data).valueOf() < $day(form.date1).valueOf()) {
    showToast('结束日期不能小于开始日期')
    form.date2 = ''
    return
  }
}

// 时间选择配置
function confirmTime1(data) {
  if ($day(`2024-12-12 ${data}`).valueOf() > $day(`2024-12-12 ${form.time2}`).valueOf()) {
    showToast('开始时间不能大于结束时间')
    form.time1 = ''
    return
  }
}
function confirmTime2(data) {
  if ($day(`2024-12-12 ${data}`).valueOf() < $day(`2024-12-12 ${form.time1}`).valueOf()) {
    showToast('结束时间不能小于开始时间')
    form.time2 = ''
    return
  }
}

// cascader级联选择
const cascaderOptions1 = reactive([
  {
    text: '浙江省',
    value: '330000',
    children: [{ text: '杭州市', value: '330100' }]
  },
  {
    text: '江苏省',
    value: '320000',
    children: [{ text: '南京市', value: '320100' }]
  }
])
const cascaderOptions2 = reactive([
  {
    text: '安徽省',
    value: '330000',
    children: [
      { text: '合肥市', value: '330100' },
      { text: '滁州市', value: '330200' }
    ]
  },
  {
    text: '江苏省',
    value: '320000',
    children: [
      { text: '南京市', value: '320100' },
      { text: '苏州市', value: '320200' }
    ]
  }
])

// 复选框列表数据
const checkboxList = reactive([
  { text: '复选框1', value: '1' },
  { text: '复选框2', value: '2' },
  { text: '复选框3', value: '3' }
])
// 单选框数据
const radioList = reactive([
  { text: '单选框1', value: '11' },
  { text: '单选框2', value: '22' },
  { text: '单选框3', value: '33' }
])

// 清空表单
function clear() {
  const objType = { number: '', string: '', undefined: undefined, null: null, object: { text: '', value: null }, array: null }
  Object.entries(form).forEach(([key, value]) => {
    const type = getType(value)
    form[key] = typeof value?.value === 'string' ? { text: '', value: '' } : objType[type]
  })
  console.log('--清空表单--', form)
}

// 提交表单
function submit() {
  formRef.value
    .validate()
    .then(() => {
      console.log('--提交成功--', form)
    })
    .catch(err => {
      console.log('--提交失敗--', err)
    })
}
</script>

<style lang="scss" scoped>
.mine {
  height: calc(100% - 50px);
  display: flex;
  flex-direction: column;
  .van-form {
    flex: 1;
    overflow-y: auto;
  }
  .btns {
    display: flex;
    padding: 0 15px;
    margin: 15px 0;
  }
}
</style>
